/**
 * CtaBtn
 * https://github.com/internetarchive/openlibrary/wiki/Design-Pattern-Library#ctabtn
 */

// `a` specificity is needed to override default anchor styles
.cta-btn,
a.cta-btn {
  font-size: 16px;
  color: @white;
  width: 100%;
  display: block;
  border: 0;
  border-radius: 5px;
  margin-top: 5px;
  box-sizing: border-box;
  cursor: pointer;
  font-family: @lucida_sans_serif-1;
  text-align: center;
  padding: 7px;
  white-space: nowrap;
  background-color: @mid-grey;
  line-height: 1.5em;
  text-decoration: none;

  transition: background-color .2s;

  .btn-icon {
    width: 40px;
    flex-shrink: 0;
  }
  // stylelint-disable-next-line selector-max-specificity
  .btn-icon.read-aloud {
    background-image: url('/static/images/icons/read aloud.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
  }

  .btn-label { padding: 0 20px; }

  &:link, &:visited {
    color: @white;
    text-decoration: none;
  }

  &--available {
    background-color: @primary-blue;
    color: @white;
    &:hover { background-color: darken(@primary-blue, 20%); }
  }

  &--unavailable {
    background-color: @orange;
    color: @white;
    &:hover { background-color: darken(@orange, 20%); }
  }
  &--shell, &--shell:link, &--shell:visited {
    background-color: @white;
    border: 2px solid @primary-blue;
    color: @primary-blue;
  }
  &--sponsor {
    border: 2px solid @link-blue;
    background: lighten(desaturate(@link-blue, 56%), 67%);
  }
  &--vanilla {
    border: 2px solid @light-mid-grey;
    background: @white;
    color: black;
  }

  &--sponsor:link, &--sponsor:visited {
      color: @link-blue;
  }

  &--sponsor:hover {
    border: 2px solid @link-blue;
    background-color: @link-blue;
    color: @white;
  }

  &--vanilla {
    padding: 5px;
    background: @white;
    border: 2px solid @light-grey;
    border-radius: 6px;
  }

  &__badge {
    background-color: @orange-two;
    padding: 4px 7px;
    border-radius: 5px;
    font-size: .7em;
  }
}

// Top margin to button coming after another button
.cta-btn + form input.cta-btn, .cta-btn + .cta-btn {
  margin-top: 5px;
}

.cta-btn--small {
  font-size: 12px;
  padding: 5px 10px;
}

.waitinglist-message {
  white-space: nowrap;
}

.cta-button-group {
  display: flex;
  align-items: center;
  position: relative;

  .cta-btn {
    margin: 0;
    padding: 8px 0;

    &:first-child {
      flex: 1;
      padding: 8px;
      overflow: hidden;
    }

    &:not(:first-child) {
      margin-left: 1px;
      width: 40px;
      transition: width 0.2s;
      overflow: hidden;
      display: flex;
    }
    // stylelint-disable-next-line selector-max-specificity
    &:not(:first-child):hover { width: 100%; }

    &:not(:last-child) { border-radius: 6px 2px 2px 6px; }
    &:not(:first-child) { border-radius: 2px 6px 6px 2px; }
  }
}
